* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: '汉仪';
    src: url('../font/HYJunKaiW.ttf');
}

body {
    background: #E5E5E5;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

ul {
    list-style: none;
}

a,
a:link,
a:active,
a:visited {
    color: #b84e44;
    outline: none;
    text-decoration: none;
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
}

a:hover {
    color: #000;
}

#wrapper {
    height: 6045px;
    position: relative;
}

#header {
    background: white;
    padding: 10px 100px;
}

#header h1 {
    width: 940px;
    font-size: 20px;
    color: #21A97E;
    margin: 0 auto;
}


/* nav */
#primary {
    position: fixed;
    top: 50%;
    right: 16px;
    margin-top: -40px;
    z-index: 5;
}

#primary li {
    height: 20px;
    position: relative;
}

#primary a {
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(../img/nav-dot.png) 4px 4px no-repeat;
}

#primary a:hover,
#primary a.active {
    background-position: 4px -16px;
}

#primary a:hover+h2 {
    display: inherit;
}

#primary h2 {
    display: none;
    color: #FFF;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    white-space: nowrap;
    padding: 0 20px 0 7px;
    background: transparent url(../img/nav-arrow.png) 100% 50% no-repeat;
    position: absolute;
    right: 22px;
    top: -6px;
}

/* content */
#content {
    max-width: 940px;
    margin: 0 auto;
    position: relative;
    z-index: 4;
}

/* 大字调色 #h2*/
#content h2 {
    color: #b84e44;
    font-size: 60px;
    font-weight: normal;
}

#content p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 20px;
}

#content article {
    position: absolute;
    padding-top: 120px;
}

#content section {
    margin-bottom: 30px;

}

#content .spacing_line {
    display: block;
    height: 3px;
    margin: 5px 0;
    border: none;
    border-top: 1px solid #3B3B3B;
    border-bottom: 1px solid #3B3B3B;
}

#content .next {
    display: block;
    width: 14px;
    height: 11px;
    text-indent: -9999px;
    margin: 0 auto;
    background: url(../img/scroll-arrow-down.png) no-repeat;
}

#content .next {
    background-position: 0 0;
}

#content .next:hover {
    background-position: 0 -11px;
}

#content .prev {
    display: block;
    width: 14px;
    height: 11px;
    text-indent: -9999px;
    margin: 0 auto;
    background: url(../img/scroll-arrow-up.png) no-repeat;
}


#content #article4 {
    width: 340px;
    height: 230px;
    /* background-color: #000; */
    position: relative;
    left: -10%;
}

#content .prev {
    background-position: 0 0px;
}

#content .prev:hover {
    background-position: 0 -11px;
}

#article1 {
    top: 0;
}

#article2 {
    top: 1060px;
}

#article3 {
    top: 2150px;
}

#article4 {
    top: 3240px;
}

#article5 {
    top: 4300px;
}


.parallax_img {
    position: absolute;
    left: 20%;
}

/* parallax_area1 */
#parallax_area1 {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -470px;
    z-index: 3;

}



.p1_5 {
    top: 700px;
    left: 400px;
}

.p1_1 {
    top: 1612px;
    left: 351px;
}

.p1_2 {
    top: 2380px;
    left: 403px;
}

.p1_3 {
    top: 3180px;
    left: 403px;
}

.p1_4 {
    top: 4000px;
    left: 551px;
}

/* .p1_1 {
    top: 800px;
    left: 355px;
}

.p1_2 {
    top: 1612px;
    left: 351px;
}

.p1_3 {
    top: 2380px;
    left: 403px;
}

.p1_4 {
    top: 3180px;
    left: 403px;
} */



/* parallax_area2 */
#parallax_area2 {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -600px;
    z-index: 2;
}

.p2_4 {
    top: 1180px;
    left: 250px;
}

.p2_1 {
    top: 1162px;
    left: 200px;
}

.p2_2 {
    top: 1300px;
    left: 1150px;
}

.p2_3 {
    top: 1543px;
    left: -35px;
}

.p2_5 {
    top: 1900px;
    left: 200px;
}

.p2_6 {
    top: 2300px;
    left: -110px;
}

.p2_7 {
    top: 2700px;
    left: 150px;
}

.p2_8 {
    top: 3100px;
    left: 1300px;
}

.p2_9 {
    top: 3400px;
    left: 20px;
}


/* parallax_area3 */
#parallax_area3 {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -600px;
    z-index: 1;
}


.p3_3 {
    top: 700px;
    left: -200px;
}

.p3_4 {
    top: 1020px;
    left: 450px;
}

.p3_1 {
    top: 1120px;
    left: -330px;
}

.p3_2 {
    top: 1350px;
    left: 995px;
}

.p3_3 {
    top: 1350px;
    left: 995px;
}


.p3_4 {
    top: 1500px;
    left: 450px;
}

.p3_5 {
    top: 1680px;
    left: -150px;
}

.p3_6 {
    top: 1680px;
    left: -150px;
}

.p3_7 {
    top: 1899px;
    left: 850px;
}

.p3_8 {
    top: 1899px;
    left: 850px;
}


.p3_9 {
    top: 850px;
    left: 900px;
}